<template>
    <div class="base-transfer">
        <el-transfer :props="getTreeProps()" filter-placeholder="请输入关键字" filterable v-bind="$attrs" />
    </div>
</template>

<script lang="ts" setup>
/**
 * @ClassName BaseTransfer
 * @Description 穿梭框
 * @Author xuyizhuo
 * @Date 2024/12/20 21:13
 * @example
 */
interface VueProps {
    props?: Record<string, string> // 组件显示的字段属性，同原生el-tree props
    loading?: boolean // 是否加载中
}

const vueProps = withDefaults(defineProps<VueProps>(), {
    props: () => {
        return {
            key: 'id',
            label: 'name',
        }
    },
    loading: false,
})
// 默认的树属性设置
const defaultProps = {
    key: 'id',
    label: 'name',
}
let mergeProps: any // 合并后的属性设置
const getTreeProps = () => {
    mergeProps = { ...defaultProps, ...vueProps.props }
    return mergeProps
}
</script>

<style lang="scss" scoped>
.base-transfer {
    width: 100%;
    height: 100%;

    // 定制穿梭框样式：占满整个容器，内容居中
    :deep(.el-transfer) {
        display: flex;
        align-items: center;
        height: 100%;

        .el-transfer-panel {
            flex: 1 1 0;
            height: 100%;

            .el-transfer-panel__body {
                height: calc(100% - var(--el-transfer-panel-header-height));
            }
        }
    }
}
</style>
